var listData = {
    cPage: 1,
    pSize: 10,
    theme: sessionStorage.getItem('market') || MARKET.today
};
var FLAG = {
    isLast: false,
    isLoading: false
};
var user = getUser();
if(user && user.userId){
    listData.userId = user.userId;
}


var NavBar = React.createClass({
    handleMarketTodayClick: function(e){
        sessionStorage.setItem('market', MARKET.today);
        listData.theme = MARKET.today;
        this.props.refreshList();
        this.props.market(true);
        e.stopPropagation();
        e.preventDefault();
    },
    handleMarketHotClick: function(e){
        sessionStorage.setItem('market', MARKET.hot);
        listData.theme = MARKET.hot;
        this.props.refreshList();
        this.props.market(true);
        e.stopPropagation();
        e.preventDefault();
    },
    handleDirectPageClick: function(){
        location.href = "direct.html";
    },
    render: function() {
        return (
            <div data-am-widget="tabs" className="am-tabs am-tabs-d2 font-14 bg-white am-margin-top-sm pinglun-tabs-1">
                <ul className="am-tabs-nav am-cf">
                    <li className={(listData.theme == MARKET.today ? 'am-active ':' ')+"bg-white prelative"}>
                        <a onClick={this.handleMarketTodayClick}>今日专场</a>
                    </li>
                    <li className={(listData.theme == MARKET.hot ? 'am-active ':' ')+"bg-white prelative"}>
                        <i className="icon-hot"></i>
                        <a onClick={this.handleMarketHotClick}>爆款推荐</a>
                    </li>
                    <li className="bg-white prelative">
                        <a onClick={this.handleDirectPageClick}>厂家直销</a>
                    </li>
                </ul>
            </div>
        )
    }
})
/**
 * 专场
 */
var MarketItem = React.createClass({
    handleMarketPageClick: function() {
        window.location.href='goods.html?m='+this.props.data.id+'&name='+encodeURIComponent(this.props.data.market_name);
    },
    render: function() {
        return (
            <div className="item am-padding-top-sm am-padding-bottom-sm border-bottom">
                <div className="picbg"><img src={IMG_PRE+this.props.data.img_url} className="am-img-responsive"/></div>
                <div className="font-color-2 font-18 am-margin-top-sm">{this.props.data.market_name}</div>
                <div className="box">
                    <div className="box-1">
                        <div className="font-12 font-color-1 am-margin-top-xs line-clamp">{this.props.data.market_desc}</div>
                    </div>
                    <div className="am-padding-left-sm am-padding-top-ss">
                        <div onClick={this.handleMarketPageClick} className="btn-7">进入专场&nbsp;&gt;</div>
                    </div>
                </div>
            </div>
        )
    }
});
/**
 * 专场列表
 */
var MarketList = React.createClass({
    render: function() {
        var itemDivs = [];
        this.props.list.forEach(function(value, index){
            itemDivs.push(<MarketItem key={index} data={value} />);
        });
        return (
            <div className="am-padding-left-sm am-padding-right-sm margin-top-42">
                <div className="list">
                    {itemDivs}
                </div>
            </div>
        )
    }
});

var dataList = [];
var Page = React.createClass({
    getInitialState: function() {
        return {
            list: []
        };
    },
    componentWillMount: function(){
        this.market(true);
    },
    componentDidMount: function() {
        window.onscroll = this.load;
    },
    load: function() {
        if(!this.state.isLoading && (getClientHeight() + getDocumentTop() >= getScrollHeight())){
            this.market();
        }
    },
    refreshList: function(){
        listData.cPage = 1;
        FLAG.isLast = false;
        FLAG.isLoading = false;
    },
    market: function(flag) {
        if(!flag && FLAG.isLast){
            return false;
        }
        FLAG.isLoading = true;
        $.ajax(
            getAjaxOps('/market/qryMarketList', listData)
        ).done(function(res){
            if(res.resultCode == 0) {
                FLAG.isLoading = false;
                if(flag){
                    dataList = res.data.list;
                }else {
                    Array.prototype.push.apply(dataList, res.data.list);
                }
                this.setState({
                    list: dataList
                });
                if(!res.data.lastPage){
                    listData.cPage++;
                }else{
                    //最后一页
                    FLAG.isLast = true;
                }
            }
        }.bind(this));
    },
    render: function() {
        return (
            <div>
                <Header title={'一手鞋'} />
                <section id="amz-main" data-tag="css-nav">
                    <NavBar market={this.market} refreshList={this.refreshList}/>
                    <MarketList list={this.state.list}/>
                </section>
                <Footer on={'index'} />
            </div>
        )
    }

});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);

